<template>
  <div class="login-wrap" @keyup.enter="submitForm('ruleForm')">
    <div class="ms-login">
      <div class="ms-title">管理系统</div>

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="ms-content">
        <el-form-item prop="username">
          <el-input v-model="ruleForm.username" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item prop="password" style="margin-bottom: 0px">
          <el-input v-model="ruleForm.password" placeholder="请输入密码" type="password"></el-input>
        </el-form-item>

        <div class="d-flex justify-content-between">
          <el-button type="text" @click="goFlow(1)">新品订单报送</el-button>
          <el-button type="text" @click="goFlow(2)">修理订单报送</el-button>
        </div>

        <div class="d-flex justify-content-between">
          <el-button type="text" @click="goFlow(3)">补料申请</el-button>
          <el-button type="text" @click="goFlow(4)">工艺回退</el-button>
        </div>
        <div class="login-btn">
          <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import api from "../../api/index";
import { menuData } from "../common/menu";

export default {
  data: function () {
    return {
      imageUrl: process.env.VUE_APP_API + "admin/adminManage/getImageCode",
      LoginLoading: false,
      ruleForm: {
        username: "",
        password: "",
        imgcode: "",
        // username: 'shipin',
        // password: '123456Aa',
      },
      rules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        imgcode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
      isClick: true,
    };
  },
  methods: {
    freshenImage() {
      this.imageUrl =
        process.env.VUE_APP_API +
        "admin/adminManage/getImageCode?" +
        Math.random();
    },
    goFlow(type) {
      if (type === 1) {
        const routeData = this.$router.resolve({
          path: "/circulation",
        });
        window.open(routeData.href, "_blank");
      }
      else if (type === 2) {
        const routeData = this.$router.resolve({
          path: "/flow",
        });
        window.open(routeData.href, "_blank");
      }
      else if (type === 3) {
        const routeData = this.$router.resolve({
          path: "/replenishmentList",
        });
        window.open(routeData.href, "_blank");
      }
      else if (type === 4) {
        const routeData = this.$router.resolve({
          path: "/backList",
        });
        window.open(routeData.href, "_blank");
      }

    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.isClick) return;
          this.isClick = false;
          let send = JSON.parse(JSON.stringify(this.ruleForm));
          api
            .login({
              account: send.username,
              password: send.password,
            })
            .then(
              (res) => {
                if (res) {
                  this.isClick = true;
                  const resourcesMenu = JSON.parse(JSON.stringify(menuData));
                  if (res.data && res.data.menus) {
                    res.data.menus = JSON.parse(res.data.menus);
                    let resources = [];
                    for (let i = 0; i < resourcesMenu.length; i++) {
                      if (res.data.menus.includes(resourcesMenu[i].id)) {
                        resources.push(resourcesMenu[i]);
                      } else {
                        if (
                          resourcesMenu[i].children &&
                          resourcesMenu[i].children.length
                        ) {
                          for (
                            let j = 0;
                            j < resourcesMenu[i].children.length;
                            j++
                          ) {
                            if (
                              !res.data.menus.includes(
                                resourcesMenu[i].children[j].id
                              )
                            ) {
                              resourcesMenu[i].children.splice(j, 1);
                              j--;
                            }
                          }
                        }
                        if (
                          resourcesMenu[i].children &&
                          resourcesMenu[i].children.length
                        )
                          resources.push(resourcesMenu[i]);
                      }
                    }
                    for (let i = 0; i < resources.length; i++) {
                      if (
                        resources[i].children &&
                        resources[i].children.length === 0
                      ) {
                        resources[i].splice(j, 1);
                        i--;
                      }
                    }
                    sessionStorage.setItem(
                      "resources",
                      JSON.stringify(resources)
                    );
                  }
                  sessionStorage.setItem("token", res.data.token);
                  sessionStorage.setItem(
                    "adminUserInfo",
                    JSON.stringify({
                      role: res.data.role,
                      realName: res.data.name,
                    })
                  );
                  this.$router.push("/");
                } else {
                  this.isClick = true;
                }
              },
              (err) => {
                this.isClick = true;
              }
            );
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.login-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(../../assets/img/login-bg.jpg);
  background-size: 100% 100%;
}

.ms-title {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  border-bottom: 1px solid #ddd;
}

.ms-login {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 350px;
  margin: -190px 0 0 -175px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.ms-content {
  padding: 30px 30px;
}

.login-btn {
  text-align: center;
}

.login-btn button {
  width: 100%;
  height: 36px;
  margin-bottom: 10px;
}

.login-tips {
  font-size: 12px;
  line-height: 30px;
  color: #fff;
}

.codeStyle {
  width: 100%;
  height: 32px;
  cursor: pointer;
  background-color: white;
  border-radius: 5px;
}
</style>
